<template>
  <div>
    <van-button type="primary" @click="catalogGoodsFn">录入商品</van-button>

    <div class="wrapDiv cle">
      <van-tabs @click="headColumnFn" v-model="tabActive" animated>
        <van-tab
          v-for="(item, inx) in goodsCategoryData"
          :key="inx"
          :title="item.n"
        >
          <h1>{{ item.d }}</h1>
          <!-- <img :src="item.i" alt="" /> -->
        </van-tab>
      </van-tabs>
    </div>

    <!-- 商品录入框 -->
    <div v-if="isCatalog" class="goodsEntry cle">
      <div v-for="item in emptyGoodsDomArr">
        <catalogGoods
          @pushGoodsInfo="pushGoodsInfoFn"
          @isVoidFalse="isVoidFalseFn"
        />
      </div>
      <van-button type="danger" @click="addGoodsBtn">+</van-button>
      <van-button type="danger" @click="submitBtn">提交新的商品</van-button>
      <van-button type="danger" @click="cancelBtn">取消</van-button>
    </div>
    <div class="entryGoodsDivBg" v-if="isEntryGoodsDivBg"></div>

    <div class="sideBarFn">
      <van-sidebar v-model="activeBadgeKey" @change="onBadgeChange">
        <van-sidebar-item
          v-for="(item, inx) in goodsCategoryData"
          :key="inx"
          :title="item.n"
        />
      </van-sidebar>
    </div>
    <div class="columnData">
      <ul v-for="item in goodsListData" @click="gotoGoodsProd(item)">
        <li><img :src="item.img" alt="" /></li>
        <li>{{ item.name }}</li>
        <li>${{ item.price }}</li>
        <li>{{ item.describe }}</li>
      </ul>
      <div class="pageChange">
        <van-pagination
          v-model="currentPage"
          :total-items="totalItems"
          :items-per-page="2"
          mode="simple"
          @change="pageChangeFn"
        />
      </div>
    </div>

    <footerBar></footerBar>
  </div>
</template>
<script>
import axios from "axios";
import API_LIST from "@/APIList.config";
import footerBar from "./footerBar";
import catalogGoods from "./catalogGoods";

export default {
  name: "goodsType",
  components: { footerBar, catalogGoods },
  data() {
    return {
      tabActive: 0,
      isCatalog: false,
      goodsCategoryData: "",
      addGoodsObj: [],
      emptyGoodsDomArr: [{}],
      isGoodsInfoCompleted: false,
      isNameRepeat: true,
      isLogin: true,
      isEntryGoodsDivBg: false,
      activeBadgeKey: 0,
      goodsListData: [],
      currentPage: 0,
      totalItems: 0,
    };
  },
  created() {
    if (localStorage.userName) {
      this.$notify(localStorage.userName + "已经登录，欢迎回来！");
      this.isLogin = false;
      this.msg = "商品分类页用户名：" + localStorage.userName;
    }
    this.getGoodsCategoryFn();
    this.getGoodsCategoryListFn("goodsList_d");
    this.pageChangeFn();
    // console.log(this.goodsCategoryData);
  },
  watch: {
    activeBadgeKey(_inx) {
      let _c = this.goodsCategoryData[_inx].d;
      this.getGoodsCategoryListFn(_c);

      // 分页
      this.currentPage = 1;
      this.pageChangeFn();
    },
  },
  methods: {
    gotoGoodsProd(item) {
      this.$router.push({
        name: "goodsProduct",
        query: { _goodsObjId: item._id, _collectionName: item.category },
      });
    },
    pageChangeFn() {
      // console.log(this.currentPage);
      // console.log(this.goodsCategoryData);
      let _c = "";
      if (!this.goodsCategoryData) {
        _c = "goodsList_d";
      } else {
        _c = this.goodsCategoryData[this.activeBadgeKey].d;
      }

      axios
        .get(API_LIST.getpageChange, {
          params: {
            startNum: (this.currentPage - 1) * 2,
            c: _c,
          },
        })
        .then((_d) => {
          // console.log(_d.data);
          this.goodsListData = _d.data;
        });
    },
    headColumnFn(_inx) {
      // console.log(_inx);
      this.activeBadgeKey = _inx;
    },
    getGoodsCategoryListFn(_c) {
      axios
        .get(API_LIST.getGoodsCategoryList, {
          params: { categoryId: _c },
        })
        .then((_d) => {
          // console.log(_d.data);
          this.totalItems = _d.data.length;
          // this.goodsListData = _d.data;
        });
    },
    getGoodsCategoryFn() {
      axios.get(API_LIST.getGoodsCategory).then((_d) => {
        // console.log(_d.data);
        this.goodsCategoryData = _d.data;
      });
    },
    catalogGoodsFn() {
      this.isCatalog = true;
      this.isEntryGoodsDivBg = true;
    },

    pushGoodsInfoFn(itemGoodsInfo) {
      let _is = true;
      for (let i = 0; i < this.addGoodsObj.length; i++) {
        if (this.addGoodsObj[i].n === itemGoodsInfo.n) {
          _is = false;
          break;
        }
      }
      if (_is) {
        this.addGoodsObj.push(itemGoodsInfo);
        this.isNameRepeat = true;
      } else {
        this.isNameRepeat = false;
        this.$dialog.alert({
          message: "商品重名！",
        });
      }
      this.isGoodsInfoCompleted = true;
    },
    isVoidFalseFn() {
      this.isGoodsInfoCompleted = false;
    },
    addGoodsBtn() {
      if (this.isGoodsInfoCompleted && this.isNameRepeat) {
        this.emptyGoodsDomArr.push({});
      } else {
        this.$dialog.alert({
          message: "商品信息未录入完毕或者商品重名",
        });
      }
    },
    submitBtn() {
      // console.log(this.addGoodsObj);
      axios.post(API_LIST.insertGoods, this.addGoodsObj).then((_d) => {
        // console.log(_d.data);
        this.$dialog
          .alert({
            message: _d.data.regsInfo,
          })
          .then(() => {
            this.isCatalog = false;
            this.isEntryGoodsDivBg = false;
            this.emptyGoodsDomArr = [{}];
            this.getGoodsCategoryFn();
          });
      });
    },
    cancelBtn() {
      this.isCatalog = false;
      this.isEntryGoodsDivBg = false;
    },
    onBadgeChange(_key) {
      // console.log(_key);
      this.activeBadgeKey = _key;
      let _c = this.goodsCategoryData[_key].d;
      // console.log(this.goodsCategoryData[_key].d);
      this.getGoodsCategoryListFn(_c);
      this.tabActive = _key;
    },
  },
};
</script>
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.cle:after {
  content: ".";
  overflow: hidden;
  visibility: hidden;
  height: 0;
  display: block;
  clear: both;
}
.wrapDiv {
  width: 80%;
  overflow: hidden;
  border: 1px solid #666;
  background: #eee;
  border-radius: 10px;
  margin: 10px auto;
}
.wrapDiv p.tip {
  font-size: 14px;
  text-align: center;
  padding: 0;
  margin: 5px 0;
  color: #666;
}
.goodsCategory {
  clear: both;
  margin: 10px 0;
  height: 50px;
}
.goodsCategory:hover {
  background: #ddd;
}
.goodsCategory li {
  float: left;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.goodsCategory li img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #666;
}
.goodsEntry {
  width: 80%;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -42%;
  z-index: 112;
  padding: 10px;
  background: #ddd;
  border-radius: 10px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
}
.entryGoodsDivBg {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  z-index: 111;
  position: absolute;
  top: 0;
  left: 0;
}
.imgSize {
  width: 100%;
  height: 100%;
}
.sideBarFn {
  width: 80px;
  position: absolute;
  top: 330px;
  left: 0;
  z-index: 10;
}
.columnData {
  clear: both;
  width: 70%;
  height: 400px;
  background: #eee;
  border-radius: 10px;
  border: 1px solid #666;
  margin: 0 0 0 90px;
}
.columnData ul {
  display: block;
  clear: both;
  overflow: hidden;
  margin: 10px 0;
  background: #ddd;
}
.columnData ul li {
  float: left;
  margin: 5px;
}
.columnData ul li.tip {
  background: #eee;
  padding: 2px;
}
.columnData ul li img {
  width: 50px;
  height: 50px;
}
.pageChange {
  width: 85%;
  float: right;
  clear: both;
}
</style>